<template>
  <div class="detail-container">
    <div class="right-item-group">
      <div class="right-top-item">
        <div class="right-top-left-group">
          <el-button @click.native.prevent="back()" type="primary" plain>返回</el-button>
        </div>
        <div class="right-top-buttom">
          <el-button @click="changeDialogVisible=true" type="primary">更改状态</el-button>
          <el-button @click="transferDialogVisible=true" type="primary">转交工单</el-button>
          <el-button @click="addDialogVisible=true" type="primary">编辑工单</el-button>
        </div>
      </div>
      <div>
        <br />
        <label style="font-size: 28px">客户报价</label>
        <br />
        <br />
        <label style="font-size: 14px">客户需要型号SU-CC8990的产品的详细报价，请速联系。</label>
      </div>

      <div style="padding: 20px 10px">
        <el-input type="textarea" :rows="8" placeholder="请输入回复内容" v-model="textarea"></el-input>
      </div>

      <div style="padding:  10px">
        <el-button type="primary">回复</el-button>
      </div>

      <div style="padding:  10px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="回复记录" name="first">
            <div
              v-for="currentSession in currentSessions1"
              :class="[activeSessionId == currentSession.sessionId+'' ?'active':'']"
              :key="currentSession.sessionId"
              :index="currentSession.sessionId+''"
            >
              <div class="session-menu-style" slot="title">
                <div class="session-src-style">
                  <el-avatar :size="50" :src="currentSession.src" style="padding-right: 50px"></el-avatar>
                </div>
                <div class="menu-middle-group">
                  <div class="session-name-style">{{currentSession.csName}}</div>
                  <div class="session-msg-style">{{currentSession.message}}</div>
                </div>
                <div class="menu-time-style">{{currentSession.time}}</div>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="操作日志" name="second">
            <div
              v-for="currentSession in currentSessions2"
              :class="[activeSessionId == currentSession.sessionId+'' ?'active':'']"
              :key="currentSession.sessionId"
              :index="currentSession.sessionId+''"
            >
              <div class="session-menu-style" slot="title">
                <div class="session-src2-style">
                  <el-avatar :size="50" :src="currentSession.src" style="padding-right: 50px"></el-avatar>
                </div>
                <div class="menu-middle-group">
                  <div class="session-name-style">{{currentSession.csName}}</div>
                  <div class="session-msg-style">{{currentSession.message}}</div>
                </div>
                <div class="menu-time-style">{{currentSession.time}}</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div class="left-item-group">
      <div class="left-top-item">
        <div class="info-bottom-group">
          <div class="info-title">
            <div>
              <span>工单信息</span>
            </div>
          </div>

          <div class="customer-info">
            <div class="info-item">
              <span class="info-label">工单分类</span>
              {{profileForm.workType}}
            </div>
            <div class="info-item">
              <span class="info-label">抄送人</span>
              {{profileForm.cclist}}
            </div>
            <div class="info-item">
              <span class="info-label">优先级</span>
              {{profileForm.priority}}
            </div>
            <div class="info-item">
              <span class="info-label">工单状态</span>
              {{profileForm.state}}
            </div>
            <div class="info-item">
              <span class="info-label">受理客服组</span>
              {{orderForm.groupName}}
            </div>
            <div class="info-item">
              <span class="info-label">受理客户</span>
              {{orderForm.customerName}}
            </div>
            <div class="info-item">
              <span class="info-label">创建时间</span>
              {{profileForm.createTime}}
            </div>
            <div class="info-item">
              <span class="info-label">更新时间</span>
              {{profileForm.updateTime}}
            </div>
          </div>

          <div class="info-title">
            <div>
              <span>客户信息</span>
              <el-link
                @click="putDialogVisible=true"
                :underline="false"
                style="color: #409eff;"
                icon="el-icon-edit"
              >编辑</el-link>
            </div>
          </div>

          <div class="customer-info">
            <div class="info-item">
              <span class="info-label">客户名称</span>
              {{tableData.customerName}}
            </div>
            <div class="info-item">
              <span class="info-label">真实姓名</span>
              {{tableData.realName}}
            </div>
            <div class="info-item">
              <span class="info-label">客户电话</span>
              {{tableData.phone}}
            </div>
            <div class="info-item">
              <span class="info-label">客户邮箱</span>
              {{tableData.email}}
            </div>
            <div class="info-item">
              <span class="info-label">客户公司</span>
              {{tableData.company}}
            </div>
            <div class="info-item">
              <span class="info-label">客户地址</span>
              {{tableData.address}}
            </div>
            <div class="info-item">
              <span class="info-label">客户等级</span>
              {{tableData.level}}
            </div>
            <div class="info-item">
              <span class="info-label">客户来源</span>
              {{tableData.channel}}
            </div>
            <div class="info-item">
              <span class="info-label">客户备注</span>
              {{tableData.remark}}
            </div>
            <div class="info-item">
              <span class="info-label">客户标签</span>
              <el-tag type="success">{{tableData.tagsId}}</el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="编辑工单" top="9vh" :visible.sync="addDialogVisible" width="33%">
      <div class="add1-dialog-style">
        <el-form ref="addOrderForm" :model="addOrderForm" label-position="left" label-width="120px">
          <el-form-item :rules="{ required: true, message: '请选择工单分类'}" label="工单分类" prop="workType">
            <el-select style="width:100%;" v-model="addOrderForm.workType" placeholder="请选择">
              <el-option label="分类一" value="分类一"></el-option>
              <el-option label="分类二" value="分类二"></el-option>
              <el-option label="分类三" value="分类三"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :rules="{ required: true, message: '请输入工单标题'}" label="工单标题" prop="title">
            <el-input style="width:100%;" v-model="addOrderForm.title" placeholder="请输入工单标题"></el-input>
          </el-form-item>
          <el-form-item
            :rules="{ required: true, message: '请输入工单描述'}"
            label="工单描述"
            prop="attachments"
          >
            <el-input
              type="textarea"
              :rows="6"
              v-model="addOrderForm.attachments"
              placeholder="请输入工单描述"
            ></el-input>
          </el-form-item>
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            :limit="3"
            :file-list="fileList"
          >
            <el-link
              type="primary"
              style="padding: 10px"
              :underline="false"
              @click="addFile"
            >添加附件（最多上传5个附件，单个文件最大50M)</el-link>
          </el-upload>
          <el-form-item label="抄送人" prop="cclist">
            <el-select style="width:100%;" v-model="addOrderForm.cclist" placeholder="请选择">
              <el-option
                v-for="csd in csData"
                :key="csd.customerServiceId"
                :label="csd.nickName"
                :value="csd.customerServiceId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="优先级" prop="priority">
            <el-radio-group v-model="addOrderForm.priority">
              <el-radio label="低"></el-radio>
              <el-radio label="中"></el-radio>
              <el-radio label="高"></el-radio>
              <el-radio label="紧急"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="工单状态" prop="state">
            <el-select style="width:100%;" v-model="addOrderForm.state" placeholder="请选择">
              <el-option label="未分配" value="未分配"></el-option>
              <el-option label="待处理" value="待处理"></el-option>
              <el-option label="处理中" value="处理中"></el-option>
              <el-option label="已解决" value="已解决"></el-option>
              <el-option label="已关闭" value="已关闭"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="受理客服组" prop="customerServiceGroupId">
            <el-select
              style="width:100%;"
              v-model="addOrderForm.customerServiceGroupId"
              placeholder="请选择"
            >
              <el-option
                v-for="gd in groupData"
                :key="gd.groupId"
                :label="gd.groupName"
                :value="gd.groupId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="受理客服">
            <el-select
              style="width:100%;"
              v-model="addOrderForm.customerServiceId"
              placeholder="请选择"
            >
              <el-option
                v-for="csd in csData"
                :key="csd.customerServiceId"
                :label="csd.nickName"
                :value="csd.customerServiceId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属客户">
            <el-input style="width:100%;" :disabled="true" :value="tableData.customerName"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="resetForm" type="text" size="normal">清空</el-button>
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditOrder">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="转交工单" top="9vh" :visible.sync="transferDialogVisible" width="33%">
      <div class="add2-dialog-style">
        <el-form
          ref="addOrderForm"
          :model="transferOrderForm"
          label-position="left"
          label-width="120px"
        >
          <el-form-item :rules="{  message: '请选择受理客服组'}" label="受理客服组">
            <el-select
              style="width:100%;"
              v-model="transferOrderForm.customerServiceGroupId"
              placeholder="请选择"
            >
              <el-option label="客服组一" value="1"></el-option>
              <el-option label="客服组二" value="2"></el-option>
              <el-option label="客服组三" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :rules="{  message: '请选择受理客服'}" label="受理客服">
            <el-select
              style="width:100%;"
              v-model="transferOrderForm.customerServiceId"
              placeholder="请选择"
            >
              <el-option
                v-for="csd in csData"
                :key="csd.customerServiceId"
                :label="csd.nickName"
                :value="csd.customerServiceId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :rules="{  message: '请输入备注'}" label="处理备注">
            <el-input
              type="textarea"
              :rows="6"
              v-model="transferOrderForm.attachments"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            :limit="3"
            :file-list="fileList"
          >
            <el-link
              type="primary"
              style="padding: 10px"
              :underline="false"
              @click="addFile"
            >添加附件（最多上传5个附件，单个文件最大50M)</el-link>
          </el-upload>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="resetForm2" type="text" size="normal">清空</el-button>
        <el-button @click="transferDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditOrder2">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="更改工单状态" top="9vh" :visible.sync="changeDialogVisible" width="33%">
      <div class="add3-dialog-style">
        <el-form
          ref="addOrderForm"
          :model="changeOrderForm"
          label-position="left"
          label-width="120px"
        >
          <el-form-item :rules="{  message: '请选择工单状态'}" label="工单状态">
            <el-select style="width:100%;" v-model="changeOrderForm.state" placeholder="请选择">
              <el-option label="未分配" value="未分配"></el-option>
              <el-option label="待处理" value="待处理"></el-option>
              <el-option label="处理中" value="处理中"></el-option>
              <el-option label="已解决" value="已解决"></el-option>
              <el-option label="已关闭" value="已关闭"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :rules="{  message: '请输入备注'}" label="处理备注">
            <el-input
              type="textarea"
              :rows="6"
              v-model="changeOrderForm.attachments"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            :limit="3"
            :file-list="fileList"
          >
            <el-link
              type="primary"
              style="padding: 10px"
              :underline="false"
              @click="addFile"
            >添加附件（最多上传5个附件，单个文件最大50M)</el-link>
          </el-upload>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="resetForm3" type="text" size="normal">清空</el-button>
        <el-button @click="changeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditOrder3">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑客户信息" top="9vh" :visible.sync="putDialogVisible" width="33%">
      <div class="add-dialog-style">
        <el-form
          ref="createOrderForm"
          :model="createOrderForm"
          label-position="left"
          label-width="120px"
        >
          <el-form-item :rules="{ required: true, message: '请输入客户名称'}" label="客户名称">
            <el-input
              style="width:100%;"
              v-model="createOrderForm.customerName"
              placeholder="请输入客户名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input
              style="width:100%;"
              v-model="createOrderForm.realName"
              placeholder="请输入客户真实姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="客户电话">
            <el-input style="width:100%;" v-model="createOrderForm.phone" placeholder="请输入客户客户电话"></el-input>
          </el-form-item>
          <el-form-item label="客户邮箱">
            <el-input style="width:100%;" v-model="createOrderForm.email" placeholder="请输入客户客户邮箱"></el-input>
          </el-form-item>
          <el-form-item label="客户公司">
            <el-input style="width:100%;" v-model="createOrderForm.company" placeholder="请输入客户客户公司"></el-input>
          </el-form-item>
          <el-form-item label="客户地址">
            <el-input style="width:100%;" v-model="createOrderForm.address" placeholder="请输入客户客户地址"></el-input>
          </el-form-item>
          <el-form-item label="客户等级">
            <el-select style="width:100%;" v-model="createOrderForm.level" placeholder="请选择客户等级">
              <el-option label="普通客户" value="普通客户"></el-option>
              <el-option label="VIP客户" value="VIP客户"></el-option>
              <el-option label="潜在客户" value="潜在客户"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户来源">
            <el-select style="width:100%;" v-model="createOrderForm.channel" placeholder="请选择客户来源">
              <el-option label="客服录入" value="客服录入"></el-option>
              <el-option label="网页介入" value="网页介入"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动性质">
            <el-checkbox-group v-model="createOrderForm.name9">
              <el-checkbox label="潜在客户"></el-checkbox>
              <el-checkbox label="上市公司"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="客户备注">
            <el-input
              type="textarea"
              :rows="6"
              v-model="createOrderForm.remark"
              placeholder="请输入客户备注"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="resetForm4" type="text" size="normal">清空</el-button>
        <el-button @click="putDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEditOrder4">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import api from "@/api/api";
export default {
  name: "OrderDetail",
  components: {},
  props: {},
  data() {
    return {
      profileForm: {},
      tableData: {},
      orderForm: {},
      activeName: "first",
      changeDialogVisible: false,
      transferDialogVisible: false,
      addDialogVisible: false,
      putDialogVisible: false,
      textarea: "",
      addOrderForm: {},
      changeOrderForm: {},
      transferOrderForm: {},
      createOrderForm: {},
      groupData: {},
      csData: {},
      currentSessions1: [
        {
          sessionId: 1,
          src:
            "http://cloud.axureshop.com/gsc/OYDPJU/cd/33/af/cd33af8285f14b02849bb51c1cc83f00/images/%E9%A6%96%E9%A1%B5/u94.png?token=13c5f1ee8eee17d085ae43551ea2fd99270d04fbe588ee163a958c3501487787",
          csName: "客服小美",
          time: " 2020/06/09 20:09",
          message:
            "收到，这个报价市场部的同时还没有出，预计下周完成。收到，这个报价市场部的同时还没有出，预计下周完成。收到，这个报价市场部的同时还没有出，预计下周完成。"
        },
        {
          sessionId: 2,
          src:
            "http://cloud.axureshop.com/gsc/OYDPJU/cd/33/af/cd33af8285f14b02849bb51c1cc83f00/images/%E9%A6%96%E9%A1%B5/u94.png?token=13c5f1ee8eee17d085ae43551ea2fd99270d04fbe588ee163a958c3501487787",
          csName: "客服小美",
          time: " 2020/06/09 20:09",
          message:
            "收到，这个报价市场部的同时还没有出，预计下周完成。收到，这个报价市场部的同时还没有出，预计下周完成。收到，这个报价市场部的同时还没有出，预计下周完成。"
        },
        {
          sessionId: 3,
          src:
            "http://cloud.axureshop.com/gsc/OYDPJU/cd/33/af/cd33af8285f14b02849bb51c1cc83f00/images/%E9%A6%96%E9%A1%B5/u94.png?token=13c5f1ee8eee17d085ae43551ea2fd99270d04fbe588ee163a958c3501487787",
          csName: "客服小美",
          time: " 2020/06/09 20:09",
          message:
            "收到，这个报价市场部的同时还没有出，预计下周完成。收到，这个报价市场部的同时还没有出，预计下周完成。收到，这个报价市场部的同时还没有出，预计下周完成。"
        }
      ],
      currentSessions2: [
        {
          sessionId: 1,
          src:
            "http://cloud.axureshop.com/gsc/OYDPJU/cd/33/af/cd33af8285f14b02849bb51c1cc83f00/images/%E9%A6%96%E9%A1%B5/u94.png?token=13c5f1ee8eee17d085ae43551ea2fd99270d04fbe588ee163a958c3501487787",
          csName: "客服小美",
          time: " 2020/06/09 20:09",
          message: "创建了工单。"
        },
        {
          sessionId: 2,
          src:
            "http://cloud.axureshop.com/gsc/OYDPJU/cd/33/af/cd33af8285f14b02849bb51c1cc83f00/images/%E9%A6%96%E9%A1%B5/u94.png?token=13c5f1ee8eee17d085ae43551ea2fd99270d04fbe588ee163a958c3501487787",
          csName: "客服小美",
          time: " 2020/06/09 20:09",
          message: "创建了工单。"
        },
        {
          sessionId: 3,
          src:
            "http://cloud.axureshop.com/gsc/OYDPJU/cd/33/af/cd33af8285f14b02849bb51c1cc83f00/images/%E9%A6%96%E9%A1%B5/u94.png?token=13c5f1ee8eee17d085ae43551ea2fd99270d04fbe588ee163a958c3501487787",
          csName: "客服小美",
          time: " 2020/06/09 20:09",
          message: "创建了工单。"
        }
      ],
      fileList: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    back() {
      this.$router.push("/order/all-order");
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    resetForm() {
      this.$refs.addOrderForm.resetFields();
    },
    resetForm2() {
      this.$refs.transferOrderForm.resetFields();
    },
    resetForm3() {
      this.$refs.changeOrderForm.resetFields();
    },
    resetForm4() {
      this.$refs.createOrderForm.resetFields();
    },
    handleEditOrder() {
      this.$refs.addOrderForm.validate(valid => {
        if (valid) {
          this.addDialogVisible = false;
          api.updateOrderAPI(this.addOrderForm).then(res => {
            let { error, data } = res.data;
            if (error) {
              this.$message.error(data);
            } else {
              this.$message({
                message: "工单信息修改成功",
                type: "success"
              });
            }
          });
        } else {
          this.$message.error("工单填写有误");
        }
      });
    },
    handleEditOrder2() {
      this.transferDialogVisible = false;
      api.updateOrderAPI(this.transferOrderForm).then(res => {
        let { error, data } = res.data;
        if (error) {
          this.$message.error(data);
        } else {
          this.$message({
            message: "工单信息修改成功",
            type: "success"
          });
        }
      });
    },
    handleEditOrder3() {
      this.changeDialogVisible = false;
      api.updateOrderAPI(this.changeOrderForm).then(res => {
        let { error, data } = res.data;
        if (error) {
          this.$message.error(data);
        } else {
          this.$message({
            message: "工单信息修改成功",
            type: "success"
          });
        }
      });
    },
    handleEditOrder4() {
      this.putDialogVisible = false;
      api.updateCustomerAPI(this.createOrderForm).then(res => {
        let { error, data } = res.data;
        if (error) {
          this.$message.error(data);
        } else {
          this.$message({
            message: "客户信息修改成功",
            type: "success"
          });
        }
      });
    },
    addFile() {
      api.getFile(this.fileList).then(res => {
        let { error, data } = res.data;
        if (error) {
          this.$message.error(data);
        } else {
          this.$message({
            message: "附件上传成功",
            type: "success"
          });
        }
      });
    }
  },
  created() {
    this.profileForm = this.$route.params.data;
    this.addOrderForm = this.profileForm;
    this.transferOrderForm = this.profileForm;
    this.changeOrderForm = this.profileForm;
    api.getCustomerAPI(this.profileForm.customerId).then(res => {
      let { error, data } = res.data;
      if (error) {
        this.$message.error(data);
      } else {
        this.tableData = data;
        this.createOrderForm = data;
      }
    });
    api.getOrder2API(this.profileForm.id).then(res => {
      let { error, data } = res.data;
      if (error) {
        this.$message.error(data);
      } else {
        this.orderForm = data;
      }
    });
    api.getAllGroupAPI({}).then(res => {
      let { error, data } = res.data;
      if (error) {
        this.$message.error("请求接口异常");
      } else {
        this.groupData = data.page;
      }
    });
    api.getAllCustomerServiceAPI({}).then(res => {
      let { error, data } = res.data;
      if (error) {
        this.$message.error("请求接口异常");
      } else {
        this.csData = data.page;
      }
    });
  }
};
</script>

<style scoped>
.detail-container {
  padding: 10px;
  display: flex;
  align-items: center;
}
.left-item-group {
  width: 25vw;
  height: 900px;
  background-color: #fff;
  padding: 20px;
  margin-left: 10px;
  box-sizing: border-box;
}
.right-item-group {
  width: 80vw;
  height: 900px;
  background-color: #fff;
  padding: 0 20px;
  box-sizing: border-box;
}
.info-label {
  font-size: 13px;
  color: #cfcfcf;
  display: inline-block;
  width: 80px;
}
.info-item {
  color: #4b4a4a;
  padding: 10px 0;
  font-size: 13px;
}
.info-bottom-group {
  margin-top: 15px;
}
.info-title {
  font-size: 18px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.customer-info {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f2f2f2;
}
.right-top-item {
  padding-top: 10px;
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
}
.right-top-left-group {
  display: flex;
  align-items: center;
}
.session-menu-style {
  display: flex;
  align-items: center;
  position: relative;
}
.menu-middle-group {
  line-height: 2em;
}
.session-name-style {
  color: #006efe;
}
.session-msg-style {
  padding-top: 2px;
  padding-bottom: 10px;
}
.session-src-style {
  margin-right: 10px;
  position: relative;
  top: -20px;
}
.session-src2-style {
  margin-right: 10px;
  position: relative;
  top: -5px;
}
.menu-time-style {
  color: #d1d3d6;
  font-size: 12px;
  position: absolute;
  left: 130px;
  top: 10px;
}
.add-dialog-style {
  height: 440px;
  overflow: auto;
  padding: 20px 10px;
  margin-top: 10px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}
.add1-dialog-style {
  height: 440px;
  overflow: auto;
  padding: 20px 10px;
  margin-top: 10px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}
.add2-dialog-style {
  height: 300px;
  overflow: auto;
  padding: 20px 10px;
  margin-top: 10px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}
.add3-dialog-style {
  height: 250px;
  overflow: auto;
  padding: 20px 10px;
  margin-top: 10px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}
</style>

<style>
.el-tabs__item {
  margin-bottom: 10px;
}
.el-tabs__nav-wrap::after {
  height: 0.5px;
}
</style>
